<template>
  <div>
    <topHeader/>
    <SubmitMaterialTop/>
    <!--    主体内容-->
    <div class="material-corporate-main">
          <!--标题-->
      <p style="padding-top: -10px">
        实收资本及股权结构</p>
      <div class="material-corporate-center">
          <!--注册资金和实收资本 输入框-->
        <div class="material-corporate-content-input">
          <dl>
            <dd>
              <span>注册资金：&nbsp;</span>
              <el-input v-model="form.registeredCapital" type="text" style="width: 339px;  height: 47px;"/>
            </dd>
            <dd style="float:left;margin-left: 12%;margin-bottom: 3.5%">
              <span >实收资本：&nbsp;</span>
              <el-input  v-model="form.paidUpCapital"  type="text" style="width: 339px;  height: 47px;"/>
            </dd>
          </dl>
        </div>
        <!--申请表格-->
        <div>
          <table class="material-corporate-center-table">
            <tr class="material-corporate-center-table-title" style="height: 25px">
              <th style="width: 336px">前三大股东名称</th>
              <th style="width: 336px">投资金额（万元）</th>
              <th style="width: 227px">股权比例</th>
              <th style="width: 400px">身份证号（或组织机构代码）</th>
            </tr>
                  <!--前股东1-->
            <tr class="material-corporate-center-table-title">
              <td> <input v-model="form.shareholder1"/></td>
              <td> <input v-model="form.investmentAmount1"/></td>
              <td> <input v-model="form.quityRation1"/></td>
              <td> <input v-model="form.number1"/></td>
            </tr>
                  <!--前股东2-->
            <tr class="material-corporate-center-table-title">
              <td> <input v-model="form.shareholder2"/></td>
              <td> <input v-model="form.investmentAmount2"/></td>
              <td> <input v-model="form.quityRation2"/></td>
              <td> <input v-model="form.number2"/></td>
            </tr>
                  <!--前股东3-->
            <tr class="material-corporate-center-table-title">
              <td> <input v-model="form.shareholder3"/></td>
              <td> <input v-model="form.investmentAmount3"/></td>
              <td> <input v-model="form.quityRation3"/></td>
              <td> <input v-model="form.number3"/></td>
            </tr>
            <tr class="material-corporate-center-table-title">
              <td><span style="color: black;">合计</span></td>
              <td><span style="color: black;" v-show="form.investmentAmountAll != '0'">{{ investmentAmountAll }}</span></td>
              <td><span style="color: black;" v-show="form.quityRationAll != '0'">{{ quityRationAll }}</span></td>
<!--              <td> <input v-model="form.investmentAmountAll"/></td>-->
<!--              <td> <input v-model="form.quityRationAll"/></td>-->
              <td></td>
            </tr>
          </table>
        </div>
        <!--企业发展基本情况简述-->
        <div class="corporate-develop-context">
            <p>企业发展基本情况简述</p>
            <span>（大致包含但不限于企业基本情况介绍、历史沿革、人员情况、设备配置、2021年/2022年生产经营情况、近三年获得的财政资金扶持情况、企业荣获的殊荣等内容）</span><br/>
          <textarea v-model="form.basicInformation"/>
        </div>
        <!--经营者素质-->
        <div class="corporate-develop-context">
          <p>经营者素质</p>
          <span>（主要描述企业实际控制人及经营者工作经历、经营经验等）</span><br/>
          <textarea v-model="form.qualityOfOperators"/>
        </div>
        <el-row style="text-align: right;margin-top: 20px">
          <el-button type="warning"
                     size="medium"
                     @click="save"
                     style="width: 100px;height: 48px;border-radius: 10px">保存</el-button>
        </el-row>
      </div>
      <div class="application-submit">
        <el-button @click="submit">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
//头部公共组件
import topHeader from "@/components/header/header";
import SubmitMaterialTop from "@/components/submit-material/submit-material-top";
//应急周转图标
import emergencyApplication from '@/assets/images/emergency-application.png';
//isChina：判断输入是否为汉字   realNumber:判断是否输入为有1~3位小数的正实数
import {isChina, realNumber} from '@/utils/regular.js'

export default {
  name: "submitMaterialCorporate",
  data() {
    return {
      capitalId:'',//用户贷款序号
      month: '',// 月份
      map: [],// 用于存储为空的字段
      emergencyApplication,//应急周转图标
      form: {//2022年10月申请使用应急周转资金企业表
        registeredCapital:'',//注册资金
        paidUpCapital:'',//实收资本

        shareholder1:'',//前股东1
        investmentAmount1:'',//投资金额 万元
        quityRation1:'',//股权比例
        number1:'',//身份证号或组织机构代码

        shareholder2:'',//前股东2
        investmentAmount2:'',//投资金额 万元
        quityRation2:'',//股权比例
        number2:'',//身份证号或组织机构代码

        shareholder3:'',//前股东3
        investmentAmount3:'',//投资金额 万元
        quityRation3:'',//股权比例
        number3:'',//身份证号或组织机构代码

        investmentAmountAll:'',//投资金额 万元（合计）
        quityRationAll:'',//股权比例（合计）

        basicInformation:'',//企业发展基本情况简述
        qualityOfOperators:'',//经营者素质
        enterpriseName:'',//申请企业名称

      },
    }
  },
  components: {
    topHeader, SubmitMaterialTop
  },
  computed:{
    investmentAmountAll(){
      //将字符串转换为数字
      var investmentAmount1 = this.form.investmentAmount1 - 0
      var investmentAmount2 = this.form.investmentAmount2 - 0
      var investmentAmount3 = this.form.investmentAmount3 - 0
      this.form.investmentAmountAll = investmentAmount1 + investmentAmount2 + investmentAmount3;
      return this.form.investmentAmountAll;
    },
    quityRationAll(){
      // if()
      var quityRation1 = this.form.quityRation1 - 0
      var quityRation2 = this.form.quityRation2 - 0
      var quityRation3 = this.form.quityRation3 - 0
      this.form.quityRationAll = quityRation1 + quityRation2 +quityRation3
      return  this.form.quityRationAll;
    }
  },
  methods: {
    mapDel(list, val) { // 封装统一方法，用于删除数组中的该字段
      for (let i = 0; i < list.length; i++) {
        if (list[i] === val) {
          list.splice(i, 1)
        }
      }
    },
    /*
    * 输入框失去焦点事件
    * formValue:传入的是表单数据，用于判断用户是否填入数据
    * value:标识，传入的是自定义的字符串，后续根据数组是否有该字段来动态显示错误提示
    * */
    setInput(formValue, value) {
      if (formValue === '') {// 第一层判断：如果传入的表单数据为空，则添加到数组中
        if (!this.map.includes(value)) {
          this.map.push(value)
        }
      } else {// 如果不为空，则从数组中删除该字段，以此来隐藏错误提示
        /*
        * 根据传入的value值判断用户输入的字段，在根据判断结果使用相对应的正则表达式进行校验
        * 如果校验结果如果，都要先删除用户之前为空输入而添加到数组中的字段，不然该错误提示无法隐藏
        * */
        if (value === 'lendingBank' || value === 'renewalBank') {
          if (!isChina(formValue)) {
            this.map.push(value + "Reg")
          } else {
            this.mapDel(this.map, value + "Reg")
          }
        } else if (value === 'loanAmount' || value === 'formoeny') {
          if (!realNumber(formValue)) {
            this.map.push(value + "Reg")
          } else {
            this.mapDel(this.map, value + "Reg")
          }
        }
        this.mapDel(this.map, value)
      }
    },
    /*
    * 点击保存
    * 保存数据至
    * */
    save(){
      console.log('保存成功')
      console.log(this.form.basicInformation)
    },

    /*
    * 点击下一步事件
    * 首先判断form中的字段是否有为空，如果有字段为空，则将该字段添加到map数组，以此对应哪个字段显示错误提示
    * 如果map数组为空，则表示所有字段都数据，则进行下一步
    * */
    submit() {
      this.$router.push('/home/submit-material/submit-material-finance')
      // for (let key in this.form) {
      //   if (this.form[key] === '') {
      //     this.map.push(key)
      //   }
      // }
      // if (this.map.length === 0) {
      //   console.log('跳转')
      // }
    },
//     enableTabIndent(t,e){
//   if(e.keyCode === 9){
//     var start = t.selectionStart;
//     var end = t.selectionEnd;
//
//     var that = jq(t);
//
//     var value = that.val();
//     var before = value.substring(0, start);
//     var after = value.substring(end);
//     var selArray = value.substring(start, end).split('\n');
//
//     var isIndent = !e.shiftKey;
//
//     if(isIndent){
//       if(start === end || selArray.length === 1){
//         that.val(before + '\t' + after);
//         t.selectionStart = t.selectionEnd = start + 1;
//       } else {
//         var sel = '\t' + selArray.join('\n\t');
//         that.val(before + sel + after);
//         t.selectionStart = start + 1;
//         t.selectionEnd = end + selArray.length;
//       }
//     } else {
//       var reduceEnd = 0;
//       var reduceStart = false;
//
//       if(selArray.length > 1) {
//         selArray.forEach(function(x, i, a){
//           if(i>0 && x.length>0 &&  x[0]==='\t'){
//             a[i] = x.substring(1);
//             reduceEnd++;
//           }
//         });
//         sel = selArray.join('\n');
//       } else {
//         sel = selArray[0];
//       }
//
//       var b1 = '',b2 = '';
//       if(before.length){
//         var npos = before.lastIndexOf('\n');
//         if(npos !== -1){
//           b1 = before.substring(0, npos+1);
//           b2 = before.substring(npos+1);
//         } else {
//           b1 = '';
//           b2 = before;
//         }
//
//         sel = b2 + sel;
//       }
//
//       if(sel.length && sel[0]==='\t'){
//         sel = sel.substring(1);
//         reduceStart = true;
//       }
//
//       that.val(b1 + sel + after);
//       t.selectionStart = start + (reduceStart ? -1 : 0);
//       t.selectionEnd = end - (reduceEnd + (reduceStart ? 1 : 0));
//     }
//     return true;
//   }
//   return false;
// }
  },
  mounted() {
    //实例挂载完毕前
    // 页面水印效果
    this.watermark.set("张万志")
  },
}
</script>

<style src="./submit-material-corporate.less" lang="less" scoped>

</style>
